<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <link rel="stylesheet" th:href="@{'/static/common/daterangepicker/daterangepicker.css'}">

    <title>填写订单</title>

    <style>
        .mypai {
            display: none;
        }
    </style>
</head>

<body class="body-gray">

<div th:replace="m/head :: body('banner.hidden', 'head-no-menu', '确认订单')"></div>

<!--主体内容-->
<div class="identical-purchase-content">
    <form id="orderForm" th:action="@{/order/create}" method="post">
        <h2>拍同款作品</h2>

        <input type="hidden" name="type" th:value="${type}">
        <input type="hidden" name="theSameStyleId" th:value="${video ne null ? video.id : ''}">
        <input type="hidden" name="photographer" th:value="${photoGrapher.id}">
        <input type="hidden" name="scriptwriter" th:value="${scriptWriter.id}">

        <!--/* 拍摄信息 */-->
        <ul>
            <li>
                <h3>拍摄信息</h3>
            </li>
            <li class="clearfix">
                <div class="left">拍摄地</div>
                <div class="right" id="location-select-btn">选择拍摄地<i class="iconfont icon-youjiantou1"></i></div>
                <input type="hidden" name="location">
            </li>
            <li class="clearfix">
                <div class="left">拍摄档期</div>
                <div class="right">
                    <input type="text" readonly placeholder="选择拍摄档期" id="execute-dates-btn">
                </div>
                <input type="hidden" class="time" name="executeDates[0]" id="execute-start"/>
                <input type="hidden" class="time" name="executeDates[1]" id="execute-end"/>
            </li>
            <li class="clearfix">
                <div class="left">备注</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-bz" id="remark-text" onclick="return false;">添加备注<i class="iconfont icon-youjiantou1"></i></div>
                <input type="hidden" name="remark">
            </li>
        </ul>

        <!--/* 作品信息 */-->
        <ul>
            <li>
                <h3>作品信息</h3>
            </li>

            <li class="clearfix" >
                <div class="left">导演</div>
                <div class="right" th:if="${type eq 1}">待分配</div>
                <div class="right" th:if="${type eq 2}">[[${photoGrapher.nickname}]]</div>
            </li>
            <li class="clearfix">
                <div class="left">编剧</div>
                <div class="right" th:if="${type eq 1}">待分配</div>
                <div class="right" th:if="${type eq 2}">[[${scriptWriter.nickname}]]</div>
            </li>

            <!--/* 同款显示类型, 不允许修改 */-->
            <li class="clearfix" th:if="${type eq 1}">
                <div class="left">作品类型</div>
                <div class="right">
                    <span class="resume" cus:dict="video-type,${video.type}"></span>
                </div>
                <input type="hidden" name="videoType" th:value="${video?.type}">
            </li>

            <!--/* 私人订制, 可选择类型 */-->
            <li class="clearfix" th:if="${type eq 2}">
                <div class="left">作品类型</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-worksType" onclick="return false;">
                    <span class="resume" id="videoType-text"></span><i class="iconfont icon-youjiantou1"></i>
                </div>
                <input type="hidden" name="videoType">
            </li>

            <!--/* 如果是同款作品, 并且是宣传片, 则不显示金钱信息 2019-01-15 */-->
            <li class="clearfix" th:if="${video eq null or video.type ne 4}">
                <div class="left">套餐类型</div>
                <!--<div class="right" id="combo-label">未选择</div>-->
                <a href="javascript:void(0)" id="combo-selector-btn">
                    <div class="right" id="combo-label">点击选择套餐</div>
                </a>
                <input type="hidden" name="combo">
            </li>
            <!--/* <li class="clearfix" th:if="${video eq null or video.type ne 4}">
                <div class="left">套餐内容</div>
                <a href="javascript:;" id="combo-selector" onclick="window.open('/combo/selector?city=' + $('#location-selector').val(), '_blank');"><div class="right">点击选择套餐</div></a>
            </li> */-->
        </ul>

        <!--/* 优惠券信息 */-->
        <ul>
            <li>
                <h3>优惠券信息</h3>
            </li>
            <li class="clearfix">
                <div class="left">优惠券</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-yhq" onclick="return false;">
                    <span class="resume" id="discount-coupon-text">选择优惠券</span><i class="iconfont icon-youjiantou1"></i>
                </div>
                <input type="hidden" name="discountcouponId">
            </li>
        </ul>

        <!--/* 发票信息 */-->
        <ul>
            <li>
                <h3>发票信息</h3>
            </li>
            <li class="clearfix">
                <div class="left">是否需要发票</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-fp" onclick="return false;">
                    <span class="invoice" id="need-receipt-text">否</span><i class="iconfont icon-youjiantou1"></i>
                </div>
                <input type="hidden" name="isNeedReceipt">
            </li>
            <li class="clearfix receipt-content" style="display: none;">
                <div class="left">发票抬头</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-tt" onclick="return false;">
                    <span id="unitName-text">个人</span><i class="iconfont icon-youjiantou1"></i></div>
                <input type="hidden" name="receiptHead" value="1">
                <input type="hidden" name="unitName">
                <input type="hidden" name="dutyNo">
            </li>
            <li class="clearfix receipt-content" style="display: none;">
                <div class="left">收票人信息</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-spr" onclick="return false;">
                    <span id="receive-text"></span><i class="iconfont icon-youjiantou1"></i>
                </div>
                <input type="hidden" name="receiveName">
                <input type="hidden" name="contactPhone">
                <input type="hidden" name="postStreet">
            </li>
            <li class="clearfix receipt-content" style="display: none;">
                <div class="left">发票内容</div>
                <div class="right" id="receipt-content-text">短视频拍摄</div>
                <input type="hidden" name="receiptContent">
            </li>

            <!--/* 如果是同款作品, 并且是宣传片, 则不显示金钱信息 2019-01-15 */-->
            <li class="clearfix receipt-content" style="display: none;" th:if="${video eq null or video.type ne 4}">
                <div class="left">发票金额</div>
                <div class="right receipt-price"></div>
            </li>
        </ul>
    </form>
</div>

<div class="private-bottom-nav identical-bottom-nav clearfix">
    <div class="left">
        <i id="agreement"></i>
        <div class="name">
            <p>短视频购买协议</p>
        </div>
    </div>
    <div class="right">
        <!--/* 如果是同款作品, 并且是宣传片, 则不显示金钱信息 2019-01-15 */-->
        <p class="pay-price" th:if="${video eq null or video.type ne 4}"></p>
        <a href="javascript:void(0)" id="submit-btn">提交订单</a>
    </div>
</div>

<!--/* 拍摄地选择模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-location" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <select class="" id="location-selector">
                <option th:each="item:${areas}" th:value="${item.id}" th:text="${item.name}"></option>
            </select>
            <p class="tishi">
                <i class="iconfont icon-gantanhao"></i>
                请选择拍摄地
            </p>
            <a href="javascript:void(0)" class="btn" data-toggle="modal" data-target=".bs-example-modal-location" onclick="window.orderForm.location.value = $('#location-selector').val(); $('#location-text').text($('#location-selector option:selected').text())">确定</a>
        </div>
    </div>
</div>

<!--/* 拍摄档期选择模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-execute-date" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <input type="date" class="time" id="execute-starter" placeholder="开始时间">
            <input type="date" class="time" id="execute-ender" placeholder="结束时间">
            <p class="tishi">
                <i class="iconfont icon-gantanhao"></i>
                请输入拍摄日期区间
            </p>
            <a href="javascript:void(0)" class="btn" data-toggle="modal" data-target=".bs-example-modal-execute-date"
               onclick="$('#execute-start').val($('#execute-starter').val()); $('#execute-end').val($('#execute-ender').val()); $('#execute-dates-text').text($('#execute-starter').val() + '至' + $('#execute-ender').val());">确定</a>
        </div>
    </div>
</div>

<!--/* 备注模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-bz" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <textarea rows="" cols="" id="remarker" placeholder="备注"></textarea>
            <p class="tishi">
                <i class="iconfont icon-gantanhao"></i>
                最多可输入300字
            </p>
            <a href="javascript:void(0)" class="btn" data-toggle="modal" data-target=".bs-example-modal-bz" onclick="window.orderForm.remark.value = $('#remarker').val(); $('#remark-text').text($('#remarker').val())">确定</a>
        </div>
    </div>
</div>

<!--/* 作品类型模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-worksType modal-selector" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <ul class="fp-ul">
                <li data-name="videoType" th:each="item:${videoTypes}" data-toggle="modal" data-target=".bs-example-modal-worksType">
                    <i th:attr="data-value=${item.value}"></i>
                    <span th:text="${item.name}"></span>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--/* 是否需要发票模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-fp" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <ul class="fp-ul">
                <li data-toggle="modal" data-target=".bs-example-modal-fp">
                    <i></i>
                    <span data-value="true">是</span>
                </li>
                <li data-toggle="modal" data-target=".bs-example-modal-fp">
                    <i></i>
                    <span data-value="false">否</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--/* 发票抬头模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-tt" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <ul class="tt-ul clearfix">
                <li class="on">个人</li>
                <li>公司</li>
            </ul>
            <div class="input tt-content" style="display: none;">
                <input type="text" id="company-name" placeholder="公司名称"/>
                <input type="text" id="taxpayer-no" placeholder="纳税人识别号"/>
            </div>
            <a href="javascript:void(0)" class="btn" data-toggle="modal" data-target=".bs-example-modal-tt" id="title-btn">确定</a>
        </div>
    </div>
</div>

<!--/* 收票人信息模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-spr" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <input type="text" id="receive-name" placeholder="收票人姓名"/>
                <input type="text" id="contact-phone" placeholder="收票人电话"/>
                <input type="text" id="post-address" placeholder="收票人地址"/>
            </div>
            <a href="javascript:void(0)" class="btn" data-toggle="modal" data-target=".bs-example-modal-spr" id="receive-btn">确定</a>
        </div>
    </div>
</div>

<!--/* 优惠券模态窗 */-->
<div class="modal fade bs-example-modal bs-example-modal-yhq" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="top clearfix">
                <h3>选择优惠券</h3>
                <span id="dont-use-coupon">不使用优惠券</span>
            </div>
            <div class="bottom" th:each="item:${discountCoupons}">
                <i style="display: none;"></i>
                <img th:attr="data-coupon-id=${item.id}, data-coupon-price=${item.price}" th:src="@{'/static/m/img/coupon' + ${#strings.substring(item.price, 0, #strings.indexOf(item.price, '.'))} + '.png'}"/>
            </div>
            <a href="javascript:void(0)" class="btn" data-toggle="modal" data-target=".bs-example-modal-yhq"
               onclick="window.orderForm.discountcouponId.value = $(this).parent().find('i:visible').next().attr('data-coupon-id') != undefined ? $(this).parent().find('i:visible').next().attr('data-coupon-id') : ''; $('#discount-coupon-text').text($(this).parent().find('i:visible').next().attr('data-coupon-price'));">确定</a>
        </div>
    </div>
</div>

<!--/* 错误提示 */-->
<div class="modal fade bs-example-modal error-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="bottom error-content">

            </div>
        </div>
    </div>
</div>

<!--/* 城市选择器 */-->
<iframe src="/area/selector" style="position: absolute; top: 0; z-index: 999; width: 100%; border-style: none; margin: 0; display: none;" id="city-selector">

</iframe>

<!--/* 套餐选择器 */-->
<iframe src="/combo/selector?city=" style="position: absolute; top: 0; z-index: 999; width: 100%; border-style: none; margin: 0; display: none;" id="combo-selector">

</iframe>

<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>
<script type="text/javascript" th:src="@{'/static/common/daterangepicker/moment.min.js'}"></script>
<script type="text/javascript" th:src="@{'/static/common/daterangepicker/daterangepicker.js'}"></script>

<script type="text/javascript">
    $(function () {
        $('#execute-dates-btn').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD',
                separator: "/",
                daysOfWeek: ["日","一","二","三","四","五","六"],
                monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '起始时间',
                toLabel: '结束时间',
            },
            isInvalidDate: function (t) {
                return t._d < Date.now() + (7 * 24 * 60 * 60 * 1000);
            },
        }, function(start, end, label) {
            $('#execute-start').val(start.format('YYYY-MM-DD'));
            $('#execute-end').val(end.format('YYYY-MM-DD'));
        });

        // 拍摄地选择
        $('#location-select-btn').click(function () {
            $('#city-selector').height(document.documentElement.offsetHeight);
            $('#city-selector').show();
        });

        // 同意协议
        var privateNavOn = 1;
        $('.private-bottom-nav .left i').click(function () {
            privateNavOn++;
            if (privateNavOn % 2 == 0) {
                $(this).addClass('on');
            }
            else {
                $(this).removeClass('on');
            }
        });

        // 点击选择套餐
        $('#combo-selector-btn').click(function () {
            // $('#combo-selector').height(document.documentElement.offsetHeight);
            var tabHeight = $(document).height();
            $('#combo-selector').css('height', tabHeight + 'px');
            if ($('#combo-selector').attr('src') != ('/combo/selector?city=' + $('input[name="location"]').val())) {
                $('#combo-selector').attr('src', '/combo/selector?city=' + $('input[name="location"]').val());
            }
            $('#combo-selector').show();
        });

        // 作品类型
        window.orderForm.videoType = $(this).prev().find('i.on').attr('data-value'); $('#video-type-text').text($(this).prev().find('i.on').next().text());
        $('.modal-selector ul li').click(function () {
            $(this).siblings().find('i').removeClass('on');
            $(this).find('i').addClass('on');
            var name = $(this).attr('data-name');
            eval('window.orderForm.' + name + '.value = ' + $(this).find('i').attr('data-value'));

            $('#' + name + '-text').text($(this).find('span').text())
        });

        // 不使用优惠券
        $('#dont-use-coupon').click(function () {
            $('.bs-example-modal-yhq .bottom i').hide();
            $(this).removeClass('on');
        });

        // 点击优惠券
        $('.bs-example-modal-yhq .bottom img').click(function () {
            var id = $(this).attr('data-coupon-id');
            var price = $(this).attr('data-coupon-price');
            // 不使用优惠券按钮active
            $('#dont-use-coupon').addClass('on');

            $('.bs-example-modal-yhq .bottom i').hide();
            $(this).prev().show();
        });

        // 是否选择发票
        $('.bs-example-modal-fp ul li').click(function () {
            $(this).siblings().find('i').removeClass('on');
            $(this).find('i').addClass('on');
            window.orderForm.isNeedReceipt.value = $(this).find('span').attr('data-value');
            $('#need-receipt-text').text($(this).find('span').text());
            if ($(this).find('span').attr('data-value') == 'false') {
                $('.receipt-content').hide();
            } else {
                $('.receipt-content').show();
            }
        });

        // 发票抬头
        $('.bs-example-modal-tt .tt-ul li').click(function () {
            $(this).addClass('on').siblings().removeClass('on');
            // 个人
            if ($(this).index() == 0) {
                $('.bs-example-modal-tt .tt-content').hide();
            }
            // 公司
            else if ($(this).index() == 1) {
                $('.bs-example-modal-tt .tt-content').show();
            }
        });

        $('#title-btn').click(function () {
            window.orderForm.receiptHead.value = $(this).parent().find('li.on').index() + 1;
            window.orderForm.unitName.value = $('#company-name').val();
            window.orderForm.dutyNo.value = $('#taxpayer-no').val();
            if (window.orderForm.receiptHead.value == 1) {
                $('#unitName-text').text('个人');
            } else {
                $('#unitName-text').text('公司');
            }
        });

        $('#receive-btn').click(function () {
            window.orderForm.receiveName.value = $('#receive-name').val();
            window.orderForm.contactPhone.value = $('#contact-phone').val();
            window.orderForm.postStreet.value = $('#post-address').val();
            $('#receive-text').text($('#receive-name').val());
        });

        var error = function(msg) {
            $('.error-modal .error-content').text(msg);
            $('.error-modal').modal();
        };

        $('#submit-btn').click(function () {
            if (!$('input[name="location"]').val()) {
                error('请选择拍摄地!');
                return false;
            }

            if (!$('input[name="executeDates[0]"]').val() && !$('input[name="executeDates[1]"]').val()) {
                error('请选择拍摄档期!');
                return false;
            }

            if (!$('input[name="videoType"]').val()) {
                error('请选择作品类型!');
                return false;
            }

            if ($('input[name="combo"]').length != 0 && !$('input[name="combo"]').val()) {
                error('请选择套餐!');
                return false;
            }

            if ($('input[name="isNeedReceipt"]').val() == 'true') {
                if (!$('input[name="receiptHead"]')) {
                    error('请选择发票抬头类型!');
                    return false;
                }

                var receiptHead = parseInt($('input[name="receiptHead"]').val());
                var unitName = $.trim($('input[name="unitName"]').val());
                if (receiptHead == 2) {
                    if (!unitName) {
                        error('请输入发票抬头!');
                        return false;
                    } else {
                        if (unitName.length < 2 && unitName.length > 50) {
                            error('发票抬头长度在2-50个字以内');
                            return false;
                        }
                    }


                }

                var receiveName = $.trim($('input[name="receiveName"]').val());
                if (receiveName.length == 0) {
                    error('请输入收票人!');
                    return false;
                } else {
                    if (receiveName < 2 && receiveName > 50) {
                        error('收票人长度在2-50个字以内');
                        return false;
                    }
                }

                if (!($('input[name="contactPhone"]').val() && Pattern.CHINA_MOBILE.test($('input[name="contactPhone"]').val()))) {
                    error('请输入正确的收票人电话!');
                    return false;
                }

                if ($.trim($('input[name="postStreet"]').val()).length == 0) {
                    error('请输入收票人地址!');
                    return false;
                }

            }

            if (!$('#agreement').hasClass('on')) {
                error('请同意短视频协议!');
                return false;
            }

            $('#orderForm').submit();
        })

    })
</script>

</html>